<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/prop-types.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 父子组件的参数传递
    // 属性(props)的特点：
    // 1- 不允许直接更改
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        render(){
            return (
                <div>
                    <h3>App</h3>
                    <Child username={"zhangsan"} age={100} sex={"男"}/>
                    <hr/>
                    <My/>
                </div>
            )
        }
    }
    class Child extends React.Component{
        static propTypes = {
            // 限制接收的属性username的值的类型必须是字符串
            username:PropTypes.string,
            // 限制接收的属性age的值的类型必须是数字且不允许省略
            age:PropTypes.number.isRequired
        }
        static defaultProps = {
            sex:"女"
        }
        render(){
            // this.props.username = "wangwu";
            // let  {username} = this.props;
            return (
                <div>
                    <h3>Child</h3>
                    <p>username:{this.props.username}</p>
                    <p>age:{this.props.age}</p>
                    <p>sex:{this.props.sex}</p>
                </div>
            )
        }
    }
    function My (){
        return (
            <div>
                <h3>My</h3>
            </div>
        )
    }
    root.render(<App/>)


</script>
</html>